<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登录--洋码头-购在全球,更多洋货 海外购_海外购物网_正品保障_海外直邮_正品低价</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 处理默认样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
    <!-- 引入网页标题图标 -->
    <link rel="shortcut icon" href="./favicon.ico">
    <!--引入JQUERY-->
    <script type="text/javascript" src="./js/jquery-3.6.0-min.js"></script>
</head>

<body>
    <!-- 上 -->
    <div class="top">
        <div class="middle">
            <div class="left">
                <a href="">
                    <img src="./images/loginlogo.png" alt="">
                </a>
            </div>
            <div class="right">
                <a class="item" href="./login.html">请登录</a>
                <div class="item">
                    <ul class="down ">
                        <li>
                            <a class="txt " href="./register.html">买家注册</a>
                        </li>
                        <li>
                            <a class="txt" href="#">卖家注册认证</a>
                        </li>
                    </ul>
                    <a class="item" href="./register.html"><span>快速注册</span><i class="sanjiao"></i></a>
                </div>
                <div class="item">
                    <a class="item" href="./register.html"><span>我的码头</span><i class="sanjiao"></i></a>
                    <ul class="down">
                        <li>
                            <a class="txt" href="./shopping.html">我的订单</a>
                        </li>
                        <li>
                            <a class="txt" href="#">我的优惠券</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 中 -->
    <div class="zhong-900">
        <div class="img">
            <img src="./images/shijie.jpg" alt="">
        </div>
        <div class="input">
            <ul class="tou">
                <li>
                    <b>洋码头账户登录</b>
                    <span>|</span>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <div class="in-lg">
                        <div class="in-lg-bg">
                            <form action="">
                                <table style="margin-left: 45px;">
                                    <tr class="div-input">
                                        <td>用户名：</td>
                                        <td><input type="text" name='username' class="loginname"></td>
                                    </tr>
                                    <tr class="div-input">
                                        <td>密码：</td>
                                        <td><input type="password" class="password" name="password"></td>
                                    </tr>
                                    <!-- <tr>
                                    <td>验证码：</td>
                                    <td>
                                        <div id="mpanel1" >
                                        </div>
                                    </td>
                                </tr> -->
                                    <tr class="div-input denglu">
                                        <td></td>
                                        <td>
                                            <a href=""><input type="submit" value="登录"></a>
                                        </td>
                                    </tr>

                                </table>

                            </form>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 下 -->
    <div class="foot"></div>
</body>
<script src="./layer/layer.js"></script>
<script>
    // 验证表单
    $('form').on('submit', function () {
        var username = $('[name="username"]').val()
    
        var password = $('[name="password"]').val()
        var reg = /^[a-zA-Z0-9]\w{4,11}$/
        if (!reg.test(username)) {
            layer.msg('用户名不符合规范，应字母或数字开头，5-13位组成', {
                time: 1000,
                icon: 2
            });
            return false
        }
        var reg = /^\w{6,12}$/
        if (!reg.test(password)) {
            layer.msg('密码不符合规范', {
                time: 1000,
                icon: 2
            });
            return false
        }
        // 调用Ajax
        var xhr = new XMLHttpRequest;
        xhr.open('post', '/api/login');
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(`username=${username}&password=${password}`)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText
                    res = JSON.parse(res);
                    console.log(res);
                    var { code, msg, } = res
                    if (code === 1) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, () => {
                            window.localStorage.setItem('userInfo', res.userInfo)
                            window.localStorage.setItem('name', username)
                            // 获取URL地址
                            let url =window.localStorage.getItem('url')
                            if(!url){
                                // 没有URL就跳转到首页
                                location.href='./index.html'
                            }else{ 
                                 window.localStorage.removeItem('url')
                                // 有URL就删除这个URL
                                location.href=url
                              
                            }
                        })
                    }

                }

            }
        }
        return false
    })
</script>

</html>